<template>
  <div class="">
    <div class="p"></div>
    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <ul>
      <div class="b">
        <b>猜你喜欢</b>
         <strong @click="huan">换一批</strong>
        <i>兴趣定制</i>
      </div>
      <li v-for="(item, index) in lists" :key="index">
        <img :src="item.picUrl" alt="" />
        <span>{{ item.category }}</span>
        <p>{{ item.copywriter }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import { reqRadioApi } from "../../../api";
export default {
  data() {
    return {
      value: "",
      lists: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    async list(num) {
      let params = { limit: 30, offset: num };
      const res = await reqRadioApi(params);
      console.log(res.data.djRadios);
      this.lists = res.data.djRadios;
    },
    huan() {
      const num = parseInt(Math.random() * 29);
      this.list(num);
    },
  },
  created() {
    const num = parseInt(Math.random() * 29);
    this.list(num);
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.p {
  width: 100%;
  height: 4px;
  background-color: #fff;
}
ul {
  width: 96%;
  margin-left: 2%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
li {
  width: 30%;
  height: 150px;
  margin: 5px 5px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
img {
  width: 100%;
  height: 70%;
  border-radius: 20px;
  align-self: center;
}
span {
  width: 100%;
  height: 14px;
  font-size: 12px;
}
p {
  padding-top: 6px;
  width: 90%;
  height: 20px;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.b {
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
}
b {
  font-weight: 600;
  margin-left: 5%;
  margin-right: 15%;
}
strong{
  /* text-decoration: none; */
  color: #000;
  margin-right: 25%;
}
</style>
